<template>
    <div>
        <div>【大区数据信息】</div>
        <div ref="target" class="w-full h-full"></div>
    </div>
</template>

<script setup>
import { ref, defineProps, onMounted,watch } from 'vue'
import * as echarts from 'echarts'
// 获取父组件传递的数据
const props = defineProps({
    data:{
        type:Object,
        required:true
    }
})

console.log(props.data)

// 初始化数据实例
let myChart = null
const target = ref(null)
onMounted(() => {
    // 实例化echarts对象
    myChart = echarts.init(target.value)
    renderChart()
})
// 构建options对象
const renderChart = () => {
    const options = {
        // X轴展示数据
        xAxis:{
            show: false,
            type:'value',
            max: function(value){
                return parseInt(value.max * 1.2);
            }
        },
        yAxis:{
            type:'category',
            data:props.data.regions.map(item => item.name),
            inverse: false,//反向展示
            // 不展示横线
            axisLine:{
                show: false
            },
            // 不展示刻度
            axisTick: {
                show: false
            },
            axisLabel:{
                color:'#9eb1c8',

            }
        },
        // 图表绘制位置 对应上下左右
        grid:{
            top:0,
            right: 0,
            left:0,
            bottom: 0,
            containLabel: true
        },
        // 核心配置
        series:[{
            type:'bar',
            data:props.data.regions.map(item => ({name:item.name,value:item.value})),
            showBackground: true, //展示柱状条背景色
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {
                color: '#479AD3',
                barBorderRadius: 5,
                shadowColor: 'rgba(0, 0, 0, 0.3)',
                shadowBlur: 5,
            },
            barWidth: 12,
            label:{
                show: true,
                position: 'right',
                textStyle:{
                    color:'#fff',
                }
            }
        }]
    }

    myChart.setOption(options)
}
// 设置 setOptions

// 数据变化时重新触发renderChart函数
watch(() => props.data, () => {
    renderChart()
})
</script>

<style lang="scss" scoped></style>